<template>
  <div class="echartsWrap">
    <div id="chart-main" ref="chart" />
    <div
      :class="[
        'emptys',
        dataListWraps && dataListWraps.peItmRslt && dataListWraps.peItmRslt.length <= 0
          ? 'on'
          : 'hide'
      ]"
    >
      <a-empty />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
let myChart: any = undefined
const chart = ref(null)
const sericeData = ref([])
const dataListWraps = ref({})
const checkTitle = ref('')
const props = defineProps({
  dataListWrap: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  },
  titles: {
    type: String, // 或者 Object, 取决于你需要的类型
    required: true
  }
})
watch(
  () => props,
  (newValue, oldValue) => {
    nextTick(() => {
      checkTitle.value = newValue.titles ? newValue.titles : ''
      dataListWraps.value = newValue.dataListWrap ? newValue.dataListWrap : {}
      initChart()
    })
  },
  {
    immediate: true,
    deep: true
  }
)

const initChart = () => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
  const chartMain: any = chart.value
  myChart = echarts.getInstanceByDom(chart.value)
  const xAxisData = dataListWraps.value.xAxisData
  const dataList = dataListWraps.value.dataList
  sericeData.value = [
    {
      name: checkTitle.value.split(',')[0],
      type: 'line',
      data: dataList
    }
  ]
  myChart = echarts.init(chartMain)
  const option = {
    title: {
      text: checkTitle.value.split(',')[1] ? '单位：' + checkTitle.value.split(',')[1] : '',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#4E5969'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    color: ['#FFCF41'],
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        onZero: false
      },
      axisTick: {
        alignWithLabel: true
      }
    },

    yAxis: {
      type: 'value'
    },
    series: sericeData.value
  }
  myChart.setOption(option)
}
</script>
<style lang="less" scoped>
.echartsWrap {
  position: relative;
}

#chart-main {
  width: 100%;
  height: 100%;
}

.emptys {
  &.on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    background: #fff;
  }

  &.hide {
    display: none;
  }
}
</style>
